<%--
  Created by IntelliJ IDEA.
  User: 惠普
  Date: 2020/6/9
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>退货详情</title>
    <%@include file="/common/header.jsp"%>
    <style>
        .cd{
            margin: 20px auto 0px auto;
            width: 80%;
        }
        .tr1{
            background-color: #F2F6FC;
            height: 35px;
            width: 250px;
        }
        tr{
            text-indent: 10px;
            text-align: left;
        }
        .d1{
            margin: 15px 0px;
        }
        .b1{
            margin: 0px 10px;
        }
    </style>
</head>
<body>
<div id="root" style="border: 1px white solid">
    <i-button type="default" @click="ret" :style="{float:'right',margin:'20px 40px'}">返回申请列表</i-button>

    <div style="width: 85%;margin: 80px auto 0px auto;">
    <Card class="cd">
        <div>
            <Icon type="md-bookmark" ></Icon>退货商品信息
        </div>
        <div>
            <i-table :columns="column" :data="data" border stripe :height="cd" >
                <template slot-scope="scope" slot="productPic"><img width="100px" height="100px" v-bind:src="scope.row.productPic"></template>
                <template slot-scope="scope" slot="productSn">价格：{{ scope.row.productPrice }}货号：{{scope.row.productSn}}</template>
                <template slot-scope="scope" slot="productAttr">{{scope.row.productAttr}}</template>
                <template slot-scope="scope" slot="status"><span style="color: red">￥{{ scope.row.giftGrowth*scope.row.productQuantity }}</span></template>
            </i-table>
        </div>
    </Card>
    <Card class="cd">
        <c:forEach items="${orderItem}" var="orderItem">
        <div>
            <Icon type="md-bookmark" ></Icon>服务单信息
        </div>
        <div>
            <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                <tr>
                    <td class="tr1">服务单号</td>
                    <td>${returnGoods.id}</td>
                </tr>
                <tr>
                    <td class="tr1">申请状态</td>
                    <td>
                        <c:if test="${returnGoods.state==0}"><span style="color: red">已拒绝</span></c:if>
                        <c:if test="${returnGoods.state==1}"><span style="color: red">待处理</span></c:if>
                        <c:if test="${returnGoods.state==2}"><span style="color: red">退货中</span></c:if>
                        <c:if test="${returnGoods.state==3}"><span style="color: red">已完成</span></c:if>
                        <c:if test="${returnGoods.state==4}"><span style="color: red">已取消</span></c:if>
                    </td>
                </tr>
                <tr>
                    <td class="tr1">订单编号</td>
                    <td>${orderItem.orderSn} <a href="/ord/order/view?id=${orderItem.orderId}">查看</a></td>
                </tr>
                <tr>
                    <td class="tr1">申请时间</td>
                    <td><fmt:formatDate value="${returnGoods.applicationTime}"/></td>
                </tr>
                <tr>
                    <td class="tr1">用户账号</td>
                    <td>${returnGoods.userCode}</td>
                </tr>
                <tr>
                    <td class="tr1">联系人</td>
                    <td>${returnGoods.order.receiverName}</td>
                </tr>
                <tr>
                    <td class="tr1">联系电话</td>
                    <td>${returnGoods.order.receiverPhone}</td>
                </tr>
                <tr>
                    <td class="tr1">退货原因</td>
                    <td>${returnGoods.returnReason.returnName}</td>
                </tr>
                <tr>
                    <td class="tr1">问题描述</td>
                    <td>${returnGoods.describ}</td>
                </tr>
                <tr>
                    <td class="tr1">凭证图片</td>
                    <td>
                        <img src="${returnGoods.voucherPicture}"  height="70">
                    </td>
                </tr>
            </table>
        </div>
        <div class="d1">
            <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                <tr>
                    <td class="tr1">订单金额</td>
                    <td>￥${orderItem.giftGrowth*orderItem.productQuantity}</td>
                </tr>
                <tr>
                    <td class="tr1">确认退款金额</td>
                    <td>
                        <c:if test="${returnGoods.state==1}">
                            <template>
                                ￥ <Input-Number :min="0" :style="{width:'100px'}" v-model="returnGoods.refundAmount" ></Input-Number>
                                <%--￥<i-Input size="small" v-model="returnGoods.refundAmount" clearable placeholder="输入金额" style="width: 120px;"/>--%>
                            </template>
                        </c:if>
                        <c:if test="${returnGoods.state!=1}">
                            <template>
                                ￥<i-Input size="small" disabled placeholder="${returnGoods.refundAmount}" style="width: 120px;"/>
                            </template>
                        </c:if>
                    </td>
                </tr>
                <c:if test="${returnGoods.state!=0}">
                    <tr>
                        <td class="tr1">选择收货点</td>
                        <td>
                            <c:if test="${returnGoods.state==1}">
                                <template>
                                    <i-Select clearable size="small" v-model="returnGoods.receivingPoint" style="width: 120px;">
                                        <i-Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label}}</i-Option>
                                    </i-Select>
                                </template>
                            </c:if>
                            <c:if test="${returnGoods.state!=1}">
                                <template>
                                    <i-Select clearable size="small" disabled style="width: 120px;" placeholder="${returnGoods.receivingPoint}">
                                        <i-Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label}}</i-Option>
                                    </i-Select>
                                </template>
                            </c:if>
                        </td>
                    </tr>
                    <tr>
                        <td class="tr1">收货人姓名</td>
                        <td>${returnGoods.order.receiverName}</td>
                    </tr>
                    <tr>
                        <td class="tr1">所在区域</td>
                        <td>${returnGoods.order.receiverProvince} ${returnGoods.order.receiverCity} ${returnGoods.order.receiverRegion}</td>
                    </tr>
                    <tr>
                        <td class="tr1">详细地址</td>
                        <td>${returnGoods.order.receiverDetailAddress}</td>
                    </tr>
                    <tr>
                        <td class="tr1">联系电话</td>
                        <td>${returnGoods.order.receiverPhone}</td>
                    </tr>
                </c:if>
            </table>
        </div>
        <div class="d1">
            <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                <c:if test="${returnGoods.state==1}">
                    <tr>
                        <td class="tr1">处理备注</td>
                        <td>
                            <template>
                                <i-Input type="textarea" v-model="returnGoods.remarks" clearable placeholder="备注" style="width: 250px;"/>
                            </template>
                        </td>
                    </tr>
                </c:if>
                <c:if test="${returnGoods.state==2 || returnGoods.state==0 || returnGoods.state==3}">
                    <tr>
                        <td class="tr1">处理人员</td>
                        <td>${returnGoods.handler}</td>
                    </tr>
                    <tr>
                        <td class="tr1">处理时间</td>
                        <td><fmt:formatDate value="${returnGoods.processingTime}"/></td>
                    </tr>
                    <tr>
                        <td class="tr1">处理备注</td>
                        <td>${returnGoods.remarks}</td>
                    </tr>
                </c:if>
            </table>
        </div>
            <div class="d1">
                <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                    <c:if test="${returnGoods.state==2}">
                        <tr>
                            <td class="tr1">收货备注</td>
                            <template>
                                <i-Input type="textarea" v-model="returnGoods.receivingRemarks" clearable placeholder="备注" style="width: 250px;"/>
                            </template>
                        </tr>
                    </c:if>
                    <c:if test="${returnGoods.state==3}">
                        <tr>
                            <td class="tr1">收货人员</td>
                            <td>${returnGoods.consignee}</td>
                        </tr>
                        <tr>
                            <td class="tr1">收货时间</td>
                            <td><fmt:formatDate value="${returnGoods.receivingTime}"/></td>
                        </tr>
                        <tr>
                            <td class="tr1">收货备注</td>
                            <td>${returnGoods.receivingRemarks}</td>
                        </tr>
                    </c:if>
                </table>
                <div style="margin: 20px auto 0px auto;text-align: center">
                    <shiro:hasPermission name="apply:processing">
                    <c:if test="${returnGoods.state==1}"><i-button class="b1" type="primary" @click="okUpdate">确认退货</i-button><i-button class="b1" type="error" @click="noUpdate">拒绝退货</i-button></c:if>
                    <c:if test="${returnGoods.state==2}"><i-button type="primary" @click="ok">确认收货</i-button></c:if>
                    </shiro:hasPermission>
                </div>
            </div>
        </c:forEach>
    </Card>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            column:[
                {title: "商品图片", slot: "productPic"},
                {title: "商品名称", key: "productName"},
                {title: "价格/货号", slot: "productSn"},
                {title: "属性", slot: "productAttr"},
                {title: "数量", key: "productQuantity"},
                {title: "小计", slot: "status"},
            ],
            data:[],
            cd:{},
            returnGoods:{},
            cityList: [
                {
                    value: '北京收货点',
                    label: '北京收货点'
                },
                {
                    value: '上海收货点',
                    label: '上海收货点'
                },
                {
                    value: '河北收货点',
                    label: '河北收货点'
                },
                {
                    value: '衡水收货点',
                    label: '衡水收货点'
                }
            ]

        },
        mounted(){
            this.getOrderItem();
        },
        methods:{
            getOrderItem() {
                axios.get("/ord/apply/orderItemList?id="+${id})
                    .then(({data})=>{
                        this.data = data.result.list;
                        this.cd = data.result.cd*100+45;
                    })
            },
            okUpdate(){
                let _this=this;
                iview.Modal.confirm({
                    title:"确认退货",
                    content:"是否确定买家退货？",
                    onOk(){
                        if (_this.returnGoods.receivingPoint==null){
                            iview.Message.info("请填写收货地点！！！")
                        }else if(_this.returnGoods.remarks==null){
                            iview.Message.info("请填写备注，让顾客了解情况！！！")
                        }else {
                            axios.post("/ord/apply/okUpdate/${returnGoods.id}",_this.returnGoods)
                                .then(({data})=>{
                                    iview.Message.success({content:data.msg});
                                    window.location.href="/ord/apply/view?id=${returnGoods.orderItemId}&cid=${returnGoods.id}";
                                })
                        }
                    },
                    onCancel(){
                        iview.Message.info("取消")
                    }
                })
            },
            noUpdate(){
                let _this=this;
                iview.Modal.confirm({
                    title:"拒绝退货",
                    content:"是否拒绝买家退货？",
                    onOk(){
                        if(_this.returnGoods.remarks==null){
                            iview.Message.info("请填写备注，让顾客了解情况！！！")
                        }else {
                            axios.post("/ord/apply/noUpdate/${returnGoods.id}",_this.returnGoods)
                                .then(({data})=>{
                                    iview.Message.success({content:data.msg});
                                    window.location.href="/ord/apply/view?id=${returnGoods.orderItemId}&cid=${returnGoods.id}";
                                })
                        }
                    },
                    onCancel(){
                        iview.Message.info("取消")
                    }
                })
            },
            ok(){
                let _this=this;
                iview.Modal.confirm({
                    title:"确认收货",
                    content:"是否确认货物已经到达？",
                    onOk(){
                        if(_this.returnGoods.receivingRemarks==null){
                            iview.Message.info("请填写收货备注，以便了解情况！！！")
                        }else {
                            axios.post("/ord/apply/ok/${returnGoods.id}",_this.returnGoods)
                                .then(({data})=>{
                                    iview.Message.success({content:data.msg});
                                    window.location.href="/ord/apply/view?id=${returnGoods.orderItemId}&cid=${returnGoods.id}";
                                })
                        }
                    },
                    onCancel(){
                        iview.Message.info("取消")
                    }
                })
            },
            ret(){
                window.location.href="/ord/apply/index";
            }
        }

    })
</script>
</html>
